<template>
  <guat-page-layout title="活动列表">
    <template #tabs>
      <guat-tabs v-model="activeTab" :tabs="ActivityStatus._ALL" @click-tab="handleOnClickTab" />
    </template>
    <template #actions>
      <guat-button-group
        :buttons="[
          {
            text: '筛选',
            internal: $config.$button.PLO,
            onClick: () => setDrawerVisible(true),
          },
          {
            text: '新增活动',
            internal: $config.$button.PLR,
            permission: $permission.ACTIVITY_MANAGE_ADD,
            onClick: () => $router.push({ name: RouteName.ACTIVITY_CREATE }),
          },
        ]"
      />
    </template>
    <div class="grid grid-cols-3 gap-4">
      <activity-item v-for="data in dataList" :data />
    </div>
    <guat-search-drawer title="筛选">
      <guat-search-form layout="vertical" />
    </guat-search-drawer>
  </guat-page-layout>
</template>

<script setup lang="ts">
import { RouteName } from "@/constant/route";
import { searchFormItemConfig } from "../form-config";
import { ActivityStatus } from "@/constant/dictionary";

const activeTab = ref<number | string>(0);
const [GuatSearchDrawer, { setDrawerVisible }] = useDrawer();
const [GuatSearchForm] = useForm(searchFormItemConfig);

const dataList = [
  {
    title: "第十五届蓝桥杯算法大赛（广西赛区）",
    createTime: "2023-04-10 20:23:22",
    tags: ["竞赛", "算法"],
    applyTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    activityTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    isAllowLeave: true,
    people: 128,
    status: 2,
  },
  {
    title: "广西壮族自治区第一百二十三届代码搬运工程师大赛活动报名",
    createTime: "2023-04-10 20:23:22",
    tags: ["竞赛", "算法", "比赛"],
    applyTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    activityTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    isAllowLeave: true,
    people: 128,
    status: 1,
  },
  {
    title: "广西壮族自治区第一百二十三届代码搬运工程师大赛活动报名",
    createTime: "2023-04-10 20:23:22",
    tags: ["竞赛", "算法"],
    applyTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    activityTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    isAllowLeave: false,
    people: 128,
    status: 2,
  },
  {
    title: "广西壮族自治区第一百二十三届代码搬运工程师大赛活动报名",
    createTime: "2023-04-10 20:23:22",
    tags: ["竞赛", "算法"],
    applyTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    activityTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    isAllowLeave: true,
    people: 128,
    status: 3,
  },
  {
    title: "广西壮族自治区第一百二十三届代码搬运工程师大赛活动报名",
    createTime: "2023-04-10 20:23:22",
    tags: ["竞赛", "算法"],
    applyTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    activityTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    isAllowLeave: true,
    people: 128,
    status: 4,
  },
  {
    title: "广西壮族自治区第一百二十三届代码搬运工程师大赛活动报名",
    createTime: "2023-04-10 20:23:22",
    tags: ["竞赛", "算法"],
    applyTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    activityTime: ["2023-12-18 00:00:00", "2023-12-22 23:59:59"],
    isAllowLeave: true,
    people: 128,
    status: 5,
  },
];

const handleOnClickTab = (key: number | string) => {
  activeTab.value = key;
};
</script>

<style scoped></style>
